<template>
  <div>
    <div class="flex-start m-b-10" v-show="showSearchFlag">
      <app-dict-select placeholder="请选择角色" dict-code="role_type_sub01" class="m-r-10" @change="roleChange"/>
      <el-input size="small" clearable style="width: 400px;"
                v-model="search.sharerName" class="m-r-10"
                placeholder="请输入分润方名称"/>
      <el-button size="small" icon="el-icon-search" type="primary" @click="query" :loading="loading">查询</el-button>
    </div>
    <div class="flex-center m-b-10">
      <auth-wrapper btn-key="filling-profit-team:add">
        <el-button size="small" type="primary" plain icon="el-icon-plus" @click="addNew">新增分润关系</el-button>
      </auth-wrapper>
      <div class="flex-center">
        <el-button icon="el-icon-refresh" circle @click="query" :loading="loading"></el-button>
        <el-button icon="el-icon-search" circle @click="showSearchFlag=!showSearchFlag"></el-button>
      </div>
    </div>
    <!--  table  -->
    <el-table class="my-table" :data="data" v-loading="loading" style="width: 100%" border
              :header-cell-style="{background:'#eee',color:'#000'}">
      <el-table-column type="selection" align="center" width="55"/>
      <el-table-column type="index" align="center" label="序号" width="60"/>
      <el-table-column label="分润方名称" min-width="200">
        <template v-slot="scope">{{ scope.row.sharerName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="角色" min-width="100">
        <template v-slot="scope">
          <dict-value-display :value="scope.row.roleType" dict-code="role_type"/>
        </template>
      </el-table-column>
      <el-table-column label="客户/企业客户名称" min-width="180">
        <template v-slot="scope">{{ scope.row.teamName | defaultValue }}</template>
      </el-table-column>
      <el-table-column label="分润规则" min-width="200">
        <template v-slot="scope">{{ scope.row.shareRate | defaultValue }} 元/吨</template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="250">
        <template v-slot="scope">
          <auth-wrapper btn-key="filling-profit-team:settings">
            <el-button @click="editRow(scope.row)" type="text" size="small"
                       icon="el-icon-edit">分润设置
            </el-button>
          </auth-wrapper>
          <auth-wrapper btn-key="filling-profit-team:delete">
            <el-button @click="deleteRow(scope.row)" type="text" size="small"
                       :loading="removeLoading"
                       icon="el-icon-delete">解除分润关系
            </el-button>
          </auth-wrapper>
        </template>
      </el-table-column>
    </el-table>
    <app-pagination ref="paginationRef" :total="total" class="m-t-20" @change="query"/>

    <el-dialog title="新增分润关系" append-to-body :visible.sync="showAddNewFlag" width="600px">
      <div class="flex-left">
        <div class="flex-start">
          <span style="width: 100px; text-align: right" class="m-r-20">分润方</span>
          <select-filling-profit-sharer-button dict-code="role_type_sub01" :init-value="formInitValue.sharer"
                                               class="w-100" size="large"
                                               @change="profitSharerChange"/>
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20">客户</span>
          <select-filling-team-button :init-value="formInitValue.team" class="w-100" size="large"
                                           @change="teamChange"/>
        </div>
        <div class="flex-start m-t-20">
          <span style="width: 100px; text-align: right" class="m-r-20">分润规则 <br/> (元/吨)</span>
          <el-input-number :min="0" class="w-100" v-model="form.shareRate"/>
        </div>
      </div>
      <div class="dividing-line m-t-10 m-b-10"></div>
      <div class="flex-end">
        <el-button size="small" @click="showAddNewFlag = false">取消</el-button>
        <el-button size="small" type="primary" @click="doConfirm" :loading="submitLoading">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {confirmWarning, getRecords, getTotal, isNull, isStringEmpty, msgError, msgSuccess} from "@/util/common-util";
import AppDictSelect from "@/components/business/app-dict-select";
import {getPage, remove, submit} from "@/api/business/filling-profit-team-rule";
import SelectFillingProfitSharerButton from "@/components/business/select-filling-profit-sharer-button";
import SelectFillingTeamButton from "@/components/business/select-filling-team-button";
import DictValueDisplay from "@/components/business/dict-value-display";
import AuthWrapper from "@/components/business/auth-wrapper";

export default {
  name: "filling-profit-team-rule-list",
  components: {
    AuthWrapper,
    DictValueDisplay,
    SelectFillingTeamButton, SelectFillingProfitSharerButton, AppDictSelect, AppPagination
  },
  data() {
    return {
      showSearchFlag: true,
      showAddNewFlag: false,
      data: [],
      loading: false,
      removeLoading: false,
      submitLoading: false,
      search: {
        roleType: '',
        sharerName: ''
      },
      total: 0,
      form: {
        shareRate: 0,
        sharerId: '',
        teamId: ''
      },
      formInitValue: {
        team: {
          id: '',
          teamName: ''
        },
        sharer: {
          id: '',
          sharerName: ''
        }
      }
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    addNew() {
      this.showAddNewFlag = true
    },
    roleChange(_type) {
      this.search.roleType = _type
      this.query()
    },
    query(_page) {
      if (isNull(_page)) {
        _page = this.$refs.paginationRef.getPage()
      }
      this.loading = true
      getPage(_page, this.search).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).then(() => {
        this.loading = false
      })
    },
    deleteRow(row) {
      confirmWarning('解除分润关系', `确定解除分润方 ${row.sharerName} ？`, () => {
        this.removeLoading = true
        remove(row.id).then(res => {
          this.removeLoading = false
          msgSuccess()
          this.query()
        }).catch(() => {
          this.removeLoading = false
        })
      })
    },
    profitSharerChange(v) {
      this.form.sharerId = v.id
    },
    teamChange(v) {
      this.form.teamId = v.id
    },
    editRow(_row) {
      this.form.sharerId = _row.sharerId
      this.form.teamId = _row.teamId
      this.form.shareRate = _row.shareRate
      this.form.id = _row.id
      this.formInitValue.team.id = _row.teamId
      this.formInitValue.team.teamName = _row.teamName
      this.formInitValue.sharer.id = _row.sharerId
      this.formInitValue.sharer.sharerName = _row.sharerName
      this.showAddNewFlag = true
    },
    doConfirm() {
      if (isStringEmpty(this.form.sharerId)) return msgError("请选择一个分润方")
      if (isStringEmpty(this.form.teamId)) return msgError("请选择一个客户")
      if (this.form.shareRate < 0) return msgError("请输入合适的分润规则")
      this.submitLoading = true
      submit(this.form).then(res => {
        this.query()
        this.submitLoading = false
        this.showAddNewFlag = false
        this.form.id = null
        this.formInitValue = {team: {}, sharer: {}}
        msgSuccess()
      }).catch(() => {
        this.submitLoading = false
      })
    }
  }
}
</script>


<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>

